<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片切换</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #box {
      width: 500px;
      height: 500px;
      background-color: rgb(43, 182, 152);
      margin: 50px auto;
      text-align: center;
      padding: 10px;
    }
    img {
      width: 500px;
      height: 450px;
    }
  </style>
  <script>
    window.onload = function () {
      var prev = document.getElementById("prev");
      var next = document.getElementById("next");
      var img = document.getElementsByTagName("img")[0];
      var imgSrcArray=["../Html/图片/1-canyon-de-chelly-national-monument-1041.jpg","../Html/图片/1_irtf-dome-1041.jpg","../Html/图片/bird-ci_20331812-trond_larsenconservation_international.jpg","../Html/图片/mimi_aung_plus_two.jpg","../Html/图片/screenshot_2021-02-16_204409.jpg"];
      console.log(imgSrcArray.length);
      var index = 0;
      prev.onclick = function () {
        index--;
        if(index<0)
        {
          index=imgSrcArray.length-1;
        }
        img.src=imgSrcArray[index];
        info.innerHTML="一共"+imgSrcArray.length+"张图片,当前是第"+ (index+1)+"张";
      };

      next.onclick = function () {
          index++;
          if(index>imgSrcArray.length-1){
            index=0;
          };
          img.src=imgSrcArray[index];
          info.innerHTML="一共"+imgSrcArray.length+"张图片,当前是第"+ (index+1)+"张";
        };
      };
  </script>
  <body>
    <div id="box">
      <p id="info"> </p>
      <img src="../Html/图片/1-canyon-de-chelly-national-monument-1041.jpg" />
      <button value="上一张" id="prev">上一张</button>
      <button value="下一张" id="next">下一张</button>
    </div>
  </body>
</html>
